<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" >

        <el-form :inline="true" :model="formInline"  class="demo-form-inline">
          <el-form-item label="学科分类">
            <el-input  placeholder="学科分类" v-model="formInline.subjectName" @keyup.enter.native="onSubmit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  @click="clearList">清除</el-button>
            <el-button type="primary" @click="onSubmit">查询</el-button>

          </el-form-item>

          <div style="text-align: right; margin-top: 0px;float: right; " class="one">
              <el-button type="success" class="demo" @click.native="dialogOpen">新增学科</el-button>
            </div>
        </el-form>

        <el-alert
          :title=alertText
          show-icon
          :closable="false">
      </el-alert>

      <el-table
    style="width: 100%"
    :data="list"
    >
    <el-table-column
      type="index"
      :index="indexMethod"

      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="subjectName"
      label="学科名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="username"
      label="创建者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="创建日期"
      width="150">
      <template #default="{ row }">
              {{ formateTime(row.addDate) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="isFrontDisplay"
      label="前台是否显示"
      width="130">
      <template #default="{ row }">
              {{row.isFrontDisplay===1?"是":"否"}}
      </template>
    </el-table-column>
    <el-table-column
      prop="twoLevelDirectory"
      label="二级目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tags"
      label="标签"
      width="120">
    </el-table-column>
    <el-table-column
      prop="totals"
      label="题目数量"
      width="120">
    </el-table-column>
    <el-table-column

      label="操作"
      width="220">
      <template #default="{ row }">
        <el-button
          type="text"
          size="small"
          @click="$router.push(`./directorys?id=${row.id}&name=${row.subjectName}`)"
          >
          学科分类
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="$router.push(`./tags?id=${row.id}&name=${row.subjectName}`)">
          学科标签
        </el-button>
        <el-button
          type="text"
          size="small"
          @click.native="dialogtrue(row)">
          修改
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="del(row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
<div class="pager">
    <el-pagination
    background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :current-page="data.page"
      :page-size="data.pagesize"
      layout="sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</el-card>
<subjects-add :showDialog.sync="showDialog" :formData="formData" :form="form"/>
    </div>
  </div>
</template>

<script>
import { list as listing, remove as getdelList } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
import subjectsAdd from '../components/subjects-add.vue'
export default {
  components: { subjectsAdd },
  data () {
    return {
      formInline: {
        subjectID: ''
      },
      list: [], // 接收列表数据
      total: 0,
      keyword: '',
      showDialog: false, // 弹窗隐藏
      formData: {
      },
      form: {
        subjectName: '', // 学科名称
        isFrontDisplay: '1'
      },
      data: {
        page: 1,
        pagesize: 10, // 每行显示条数
        subjectName: '' // 查询参数
      },
      alertText: '共0条'
    }
  },
  // 调用
  created () {
    this.lister()
  },
  methods: {
    // 点击清除按钮，清空input框
    clearList () {
      this.formInline.subjectName = ''
      this.data.subjectName = this.formInline.subjectName
      this.lister()
    },
    // 点击查询，根据用户输入值，查询到相关数据，并显示在列表
    onSubmit () {
      // if(this.formInline.subjectName){
      this.data.subjectName = this.formInline.subjectName
      this.lister()
      // }
    },
    // 点击修改弹窗出现
    dialogtrue (row) {
      this.showDialog = true
      // let newRow = row
      // this.formData = row
      // 复制对象
      this.formData = JSON.parse(JSON.stringify(row))
      this.form = JSON.parse(JSON.stringify(row))
      // console.log(this.form.isFrontDisplay);
      // ES6 对象指针

      // this.formData = row
      // this.form = row
    },
    // 点击添加弹窗出现
    dialogOpen () {
      this.showDialog = true
      // 再次打开前需将对象置空或恢复原样
      this.form = {
        subjectName: '', // 学科名称
        isFrontDisplay: 1
      }
      this.formData = {
      }
    },
    // 删除
    del (id) {
      const deletelist = {
        id: id
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message.success('恭喜！删除成功')
        const res = await getdelList(deletelist)
        console.log(res)
        // 如果当前页面数据只有一条,删除以后页面没有数据,此时页码应该往前跳转一页
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.lister()
      })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 处理时间格式
    formateTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 页容量发生变化
    handleSizeChange (val) {
      this.data.pagesize = val
      this.data.page = 1
      this.lister()
    },
    // 分页
    handleCurrentChange (val) {
      this.data.page = val
      this.lister()
    },
    // 获取列表数据
    async lister () {
      const { data } = await listing(this.data)
      this.list = data.items
      this.total = data.counts
      console.log(data)
      this.alertText = '数据一共 ' + data.counts + ' 条'
      console.log(data)
    },
    /**
     * 计算当前行的行号
     */
    indexMethod (index) {
      return (this.data.page - 1) * this.data.pagesize + index + 1
    }
  }
}

</script>

<style scoped>
::v-deep .demo-form-inline{
  display: flex;
    display: inline;
}
::v-deep .one{
  display: inline;
  margin-right: auto;
  margin-top: 50px;

}
::v-deep .pager{
  margin:10px;
  display:flex;
  justify-content:flex-end
}
</style>
